import React, {useState} from 'react'

import {Card, DatePicker, Switch, Select, Tag, List, Space, Avatar, Popover, Button} from 'antd'

import {Container} from './style'

import { MessageOutlined, LikeOutlined, HighlightTwoTone, CloseCircleTwoTone, CheckCircleTwoTone } from '@ant-design/icons'

const { RangePicker } = DatePicker
const { Option } = Select

function PlanHistory(){
    //我的计划
    const [myPlanList, setMyPlanList] = useState([
        {
            id: 0,
            title: '计划一这是一个计划',
            date: '2020-04-30 12:02:22',
            content: [
                {
                    item: '蚂蚁金服设计平台 ant.design',
                    isFinish: true
                },
                {
                    item: '蚂蚁金服设计平台 ant.design',
                    isFinish: false
                }
            ]
        },
        {
            id: 1,
            title: '计划一这是一个计划',
            date: '2020-04-30 12:02:22',
            content: [
                {
                    item: '蚂蚁金服设计平台 ant.design',
                    isFinish: true
                },
                {
                    item: '蚂蚁金服设计平台 ant.design',
                    isFinish: true
                }
            ]
        }
    ])
    //赞过的计划
    const [likePlanList, setLikePlanList] = useState([
        {
            id: 0,
            title: '计划一这是一个计划',
            date: '2020-04-30 12:02:22',
            content: [
                {
                    item: '蚂蚁金服设计平台 ant.design',
                },
                {
                    item: '蚂蚁金服设计平台 ant.design',
                }
            ]
        },
        {
            id: 1,
            title: '计划一这是一个计划',
            date: '2020-04-30 12:02:22',
            content: [
                {
                    item: '蚂蚁金服设计平台 ant.design',
                },
                {
                    item: '蚂蚁金服设计平台 ant.design',
                }
            ]
        }
    ])
    const IconText = ({ icon, text }) => (
        <Space>
            {React.createElement(icon)}
            {text}
        </Space>
    )
    return (
        <Container>
            <div className="left">
                <Card style={{marginBottom: 24}}>
                    <div className="filter">
                        <span>时间筛选：<RangePicker /></span>
                    </div>
                    <div>
                        <span style={{marginRight: 24}}>是否完成：<Switch checkedChildren="是" unCheckedChildren="否"/></span>
                        <span style={{marginRight: 24}}>是否公开：<Switch checkedChildren="是" unCheckedChildren="否"/></span>
                        <span>
                            排序方式：
                            <Select defaultValue="time" style={{ width: 120 }}>
                                <Option value="time">时间靠前</Option>
                                <Option value="like">赞最多</Option>
                                <Option value="comment">评论最多</Option>
                            </Select>
                        </span>
                    </div>
                </Card>
                <Card>
                    <List
                        itemLayout="vertical"
                        size="large"
                        dataSource={myPlanList}
                        loadMore={
                            <div style={{textAlign: 'center', paddingTop: 12}}>
                                <Button>加载更多</Button>
                            </div>
                        }
                        renderItem={item => (
                            <List.Item
                                key={item.id}
                                actions={[
                                    <span>{item.date}</span>,
                                    <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                                    <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                                ]}
                            >
                                <List.Item.Meta
                                    title={item.title}
                                    description={
                                        <Space size={6}>
                                            <Tag>完美达成</Tag><Tag>点赞最多</Tag>
                                        </Space>
                                    }
                                />
                                {
                                    item.content.map((item, index) => {
                                        return (
                                            <div key={index} style={{cursor: 'pointer'}}>
                                                <Popover placement="right" content={
                                                    item.isFinish ? 
                                                    <Button type="dashed" size="small" icon={<CloseCircleTwoTone twoToneColor="#eb2f96"/>}>未完成</Button>
                                                    :
                                                    <Button type="dashed" size="small" icon={<CheckCircleTwoTone twoToneColor="#52c41a"/>}>已完成</Button>
                                                    
                                                }>
                                                    <Space style={{padding: '2px 0'}}>
                                                        {
                                                            item.isFinish ? 
                                                            <CheckCircleTwoTone twoToneColor="#52c41a"/>
                                                            :
                                                            <CloseCircleTwoTone twoToneColor="#eb2f96"/>
                                                        }
                                                        <span className="plan-item">{item.item}</span>
                                                    </Space>
                                                </Popover>
                                            </div>
                                        )
                                    })
                                }
                            </List.Item>
                        )}
                    />
                </Card>
            </div>
            <div className="right">
                <Card title="赞过的计划">
                    <List
                        itemLayout="vertical"
                        size="large"
                        loadMore={
                            <div style={{textAlign: 'center', paddingTop: 12}}>
                                <Button>加载更多</Button>
                            </div>
                        }
                        dataSource={likePlanList}
                        renderItem={item => (
                            <List.Item
                                key={item.id}
                                actions={[
                                    <span>{item.date}</span>,
                                    <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                                    <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                                ]}
                            >
                                <List.Item.Meta
                                    title={item.title}
                                    description={
                                        <Space size={6}>
                                            <Avatar size="small" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                            <span>你的名字</span>
                                        </Space>
                                    }
                                />
                                {
                                    item.content.map((item, index) => {
                                        return (
                                            <div key={index}>
                                                <Space style={{padding: '2px 0'}}>
                                                    <HighlightTwoTone />
                                                    {item.item}
                                                </Space>
                                            </div>
                                        )
                                    })
                                }
                                
                            </List.Item>
                        )}
                    />
                </Card>
            </div>
        </Container>
    )
}

export default PlanHistory